﻿<html>
  <head>
    <meta name="generator" content="h-smile:richtext"/>
  </head>
<body>
  <h1>behavior:select</h1>
  <p>标准选择列表&lt;select&gt;行为。原则上它可以被应用到任何元素上。</p>
  <h2>元素</h2>
  <p>默认情况下，应用了该行为的元素有:</p>
  <ul>
    <li><code>&lt;select size=&quot;2...N&quot;&gt;&lt;/select&gt;</code></li>
    <li><code>&lt;select|list&gt;&lt;/select&gt;</code></li></ul>
  <h2>示例</h2>
  <div>
    <select|list novalue="无选择项">
      <option>选项1</option>
      <option>选项2</option>
      <option>选项3</option>
    </select>
	<select|list novalue="无选择项">
      <option>选项1</option>
      <option>选项2</option>
      <option>选项3</option>
    </select>
  </div>
  <h2>模型</h2>
  <p><code>&lt;select&gt;</code>可能包含<code>&lt;option&gt;</code>元素。<code>&lt;option&gt;</code>元素可以包含在任何html标签内。</p>
  <p>该行为将&lt;option&gt;或任何包含<code>role=&quot;option&quot;</code>属性的元素当做一个可选择实体。</p>
  <p>被选中的option将会设置<code>:current</code>状态标志。</p>
  <p>示例, 一个简单的选择列表:</p>
  <pre>&lt;select&gt;
  &lt;option value=&quot;#ff0000&quot; selected&gt;Red&lt;/option&gt;
  &lt;option value=&quot;#00ff00&quot;&gt;Green&lt;/option&gt;
  &lt;option value=&quot;#0000ff&quot;&gt;Blue&lt;/option&gt;
&lt;/select&gt;
</pre>
  <p>将&lt;table&gt;元素当做一个选择列表:</p>
  <pre>&lt;style&gt;
  table.select { behavior:select; }
  table.select &gt; tr:current { color:white; background:blue; }
&lt;/style&gt;

&lt;table.select&gt;
  &lt;tr role=option value=&quot;#ff0000&quot;&gt;&lt;td&gt;Red&lt;/td&gt;&lt;td&gt;#FF0000&lt;td&gt;&lt;/tr&gt;
  &lt;tr role=option value=&quot;#00ff00&quot;&gt;&lt;td&gt;Green&lt;/td&gt;&lt;td&gt;#00FF00&lt;td&gt;&lt;/tr&gt;
  &lt;tr role=option value=&quot;#0000ff&quot;&gt;&lt;td&gt;Blue&lt;/td&gt;&lt;td&gt;#0000FF&lt;td&gt;&lt;/tr&gt;
&lt;/table&gt;
</pre>
  <h2>属性</h2>
  <p>该行为需要知道的属性:</p>
  <ul>
    <li><code>size=integer</code> - 列表中可见元素的数量。注意：select元素的高度可以被CSS覆盖掉。</li>
    <li><code>name=&quot;name&quot;</code> - 标准的<em>name</em>属性 - from表单上一个input元素的名称。</li>
    <li><code>novalue=&quot;text&quot;</code> - 如果select中没有使用<code>&lt;option selected&gt;</code>初始化它，则将会使用该显示该文本。</li>
    <li><code>options</code> - 一个<code>&lt;option&gt;</code>列表的引用, 在这种场景中，this是元素本身。</li>
		<li><code>as=&quot;type&quot;</code> - 定义<code>&lt;option value=&quot;...&quot;&gt;</code>的解析规则，接收:
      <ul>
        <li><code>as=&quot;auto&quot;</code>, 默认值, 尝试翻译option的 value值为integer、float、boolean或length值。如果解析失败，则将value作为字符串。</li>
				<li><code>as=&quot;integer&quot;</code>, 尝试翻译option的value值为integer。如果解析失败，则将value作为字符串。</li>
				<li><code>as=&quot;float&quot;</code>, 尝试翻译option的value值为float。如果解析失败，则将value作为字符串。</li>
				<li><code>as=&quot;numeric&quot;</code>, 尝试翻译option的value值为integer或float。如果解析失败，则将value作为字符串。</li>
				<li><code>as=&quot;string&quot;</code>, 不解析option的value。将value作为字符串返回。</li>
      </ul>
    </li>
	</ul>
  <h2>事件</h2>
  <p>除了标准事件集(鼠标、按键、聚焦)外，该行为还生成:</p>
  <ul>
    <li><code>SELECT_SELECTION_CHANGED</code> event, 当修改select中的选择项(在一个option上点击)时产生该事件。该事件为异步事件。</li>
    <li><code>SELECT_SELECTION_CHANGING</code> event, 当选择项将要改变时生成该事件。该事件为同步事件。</li></ul>
  <h2>方法</h2>
  <p>N/A - 该行为没有引入任何特有的方法。</p>
	<h2>命令</h2>
	<p>注意: 命令时通过调用<code>element.execCommand(&quot;cmd-name&quot;[,params])</code>方法执行的。</p>
	<ul><li><b>&quot;set-current&quot;</b> - 当该命令发送给一个select内部的<code>&lt;option&gt;</code>元素时，该option将被设置为当前元素;</li></ul>
  <h2>value</h2>
  <p>any, 读/写属性。选择项(option)的值(value)。option的值是它的value属性或它的文本内容(如果未定义value属性时)。</p>
  <h2>在脚本中选择项修改的处理</h2>
  <h3><code>onValueChanged</code>事件</h3>
  <pre>var btn = $(select#some);
btn.onValueChanged = function() { var v = this.value; ... }
</pre>
  <h3><code>on()</code> 订阅</h3>
  <pre>var btn = $(select#some);
btn.on(&quot;change&quot;, function() { ... 事件处理代码 ... });
self.on(&quot;change&quot;, &quot;select#some&quot;, function() { ... 事件处理代码 ... });
</pre>
  <h3>decorators.tis 装饰器</h3>
  <pre>include &quot;decorators.tis&quot;;
@change @on &quot;select#some&quot; :: ... 事件处理代码 ...;
</pre>
</body>
</html>